<template>
	<view class="input_class">
		<view class="name_class">
			<span class="name"><span class="start">*</span>联系人</span>
			<input :placeholder-style="inputPlaceHolderStyle"
				class="input" type="text" placeholder="请输入姓名" v-model="userInfo.name">
		</view>
		<view class="name_class">
			<!-- <span class="name"><span class="start">*</span>联系电话</span>
			<input :placeholder-style="inputPlaceHolderStyle"
				type="text" placeholder="请输入电话号码" v-model="userInfo.tel"> -->
				<!-- 手机号 -->
				<view class="item text-nr flex justify-between">
				    <view class="label">手机号</view>
				    <view class="content">{{
				        userInfo?.mobile == '' ? '未绑定手机号' : userInfo?.mobile
				    }}</view>
				
				    <!-- #ifdef MP-WEIXIN -->
				    <u-button
				        open-type="getPhoneNumber"
				        @getphonenumber="getPhoneNumber"
				        type="primary"
				        shape="circle"
				        size="mini"
				        :plain="true"
				    >
				        {{ userInfo?.mobile == '' ? '绑定手机号' : '更换手机号' }}
				    </u-button>
				    <!-- #endif -->
				    <!-- #ifndef MP-WEIXIN -->
				    <u-button
				        @click="showMobilePop = true"
				        size="mini"
				        type="primary"
				        shape="circle"
				        :plain="true"
				    >
				        {{ userInfo?.mobile == '' ? '绑定手机号' : '更换手机号' }}
				    </u-button>
				    <!-- #endif -->
				</view>
		</view>

	<view class="center">
		<view class="card-text">
			<span class="start">*</span>请拍摄并上传您的仓库照片
		</view>
		<view class="card-img">
			<view class="card-img2" @click="zphotoFn">
				<image class="img" src="../../static/images/zhaopian.png" v-if="userInfo.businessNameCard==''"></image>
				<image class="img" :src="userInfo.businessNameCard" v-else></image>
			</view>
		</view>
	</view>

	<view class="bitton" @click="emitFn">
		提交申请
	</view>
	<view class="bottom">

	</view>
		
	</view>
</template>
<script setup>
	import { ref, reactive, computed } from 'vue'
	import { uploadImage } from '@/api/app'
	import { authentication } from '@/api/user'
	const inputPlaceHolderStyle=ref("color:#AAAAAA")
	const userInfo=ref({
					name:'',
					tel:null,
					businessNameCard:'',
				})
	
	const uploadImageIng = async (file) => {
	    uni.showLoading({
	        title: '正在上传中...'
	    })
	    try {
	        const res = await uploadImage(file)
	        uni.hideLoading()
			// console.log(res,'resssss')
	  //       console.log(res.uri,'uri')
	        // emit('update:modelValue', res[props.fileKey])
			// console.log(res,'re');
			// return res.uri
				userInfo.value.businessNameCard=res.uri
			// console.log(userInfo.value.frontCard,'userInfo.value.frontCard');
	    } catch (error) {
	        uni.hideLoading()
	        uni.$u.toast(error)
	    }
		
	}
	
	const zphotoFn=(num)=>{
		uni.chooseImage({
		  count: 1, // 最多选择一张图片
		  sourceType: ['album', 'camera'], // 只允许从相机选择
		  sizeType:['original', 'compressed'],
		   quality: 50,
		  success: (res) => {
		    // console.log(res)
		    const tempFilePaths = res.tempFilePaths
		    // 在这里处理图片文件
			// console.log(tempFilePaths);
				uploadImageIng(res.tempFilePaths[0])

		  }
		})
	}
	
	const getAddress=()=>{
		console.log(111111111);
		uni.chooseLocation({
			success: (res)=> {
				userInfo.value.address=res.address
			}
		});
	}
	
	const emitFn=async()=>{
		
		if(userInfo.value.name==''){
			uni.showToast({
				title: '请输入姓名',
				icon:"none",
			});
			return false
		}
		 if(userInfo.value.tel==null){
			uni.showToast({
				title: '请输入电话号',
				icon:"none",
			});
			return false
		}
		var reg=/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
			
			if(!reg.test(userInfo.value.tel)){
				uni.showToast({
					title: '手机格式错误',
					icon:"none",
				});
				return false;
			}
		
		 if(userInfo.value.businessNameCard==''){
			uni.showToast({
				title: '请上传照片',
				icon:"none",
			});
			return false;
		}
		
		let data1=await authentication({
			realname:userInfo.value.name,
			phone:userInfo.value.tel,
			warehouseimg:userInfo.value.businessNameCard
		})
		
		if(data1.data==0){
			uni.showToast({
				title:'不能重复申请',
				icon:'none'
			})
		}
		if(data1.data==2){
			uni.showToast({
				title:'申请失败',
				icon:'none'
			})
		}
		if(data1.data==1){
			uni.showToast({
				title:'申请成功',
				icon:'none'
			})
		}
		userInfo.value.name=''
		userInfo.value.tel=null
		userInfo.value.businessNameCard=''
		// if()
		console.log(data,'yiyerenz');
		
	}
			
</script>

<style lang="scss" scoped>
	.name_class1{
		// display: flex;
		// justify-content: space-between;
		height: 350rpx;
		background-color: #fff;
		line-height: 100rpx;
		box-sizing: border-box;
		border: 2rpx solid #F8F8F8;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 25rpx;
	}
	.yemian{
		height: 154rpx;
		background-color: #fff;
	}
	.input-address {
		margin-right: 40rpx;
	}
	.start{
		color: red;
	}

	.left {
		position: absolute;
		right: 0;
		width: 30rpx;
		height: 27rpx;
		top: 12rpx;
	}



	.input_class {
		margin-top: 20rpx;
	}

	.name_class {
		display: flex;
		justify-content: space-between;
		height: 100rpx;
		background-color: #fff;
		// line-height: 100rpx;
		box-sizing: border-box;
		border: 2rpx solid #F8F8F8;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 25rpx;
	}

	.name {
		padding-top: 5rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	input {
		// color: #cccccc;
		width: 378rpx;
		text-align: right;
		height: 34rpx;
		// border-radius: 0rpx 0rpx 0rpx 0rpx;
		// opacity: 1;
		width: 378rpx;
		height: 34rpx;
		font-size: 24rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;


	}

	input::placeholder {
		color: red !important;
	}

	.placeholder {
		color: #AAAAAA;
	}

	.center {
		// width: 690rpx;
		width:100%;
		height: 230rpx;
		background: #FFFFFF;
		opacity: 1;
	}

	.card-text {
		width: 388rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		line-height: 48rpx;
		padding-left: 20rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		// margin: 14rpx 44rpx 12rpx 46rpx;
	}

	.card-img {
		display: flex;
		justify-content: space-between;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	.card-img2 {
		width: 120rpx;
		height: 120rpx;
	}

	.card-text2 {
		width: 314rpx;
		height: 56rpx;
		background: #2568BC;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		text-align: center;
		color: #FFFFFF;
		line-height: 56rpx;
	}

	.bitton {
		// position: absolute;
		// bottom: 54rpx;
		position: fixed;
		bottom: 100rpx;
		// margin-top: 60rpx;
		width: 690rpx;
		height: 104rpx;
		// margin-bottom: 60rpx;
		background: linear-gradient(90deg, #59C381 0%, #61D59A 42%, #6AE9B5 100%);
		border-radius: 16rpx 16rpx 16rpx 16rpx !important;
		opacity: 1;
		border-radius: 72rpx;
		text-align: center;
		line-height: 104rpx;
		color: #FFFFFF;
		margin-left: 30rpx;
	}

	.bottom {
		height: 122rpx;
	}
</style>